<template>
	<div>
		<div class="container">
			<vue-particles color="#fff" :particleOpacity="0.7" :particlesNumber="60" shapeType="circle"
				:particleSize="4" linesColor="#fff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4"
				:linesDistance="150" :moveSpeed="2" :hoverEffect="true" hoverMode="grab" :clickEffect="true"
				clickMode="push" class="lizi" style="height:100%">
			</vue-particles>
			<div class="wrapper">
				<div class="user-avatar">
					<img :src="userImage.avatar" />
				</div>
				<div class="title">欢迎使用后台管理系统</div>
				<el-form :model="loginFormParams" :rules="loginFormRules" ref="loginFormRefs">
					<el-form-item prop="mobile">
						<el-input type="text" v-model="loginFormParams.mobile" size="small" prefix-icon="el-icon-user">
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" v-model="loginFormParams.password" size="small"
							prefix-icon="el-icon-lock"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button style="width: 100%;" size="small" type="primary" @click="UserLogin"
							:loading="loading">
							{{loading ?'登录中...' : '登录'}}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		// 组件名称
		name: 'login',
		// 组件状态值
		data() {
			return {
				loading: false,
				loginFormParams: {
					mobile: "admin",
					password: "123456"
				},
				loginFormRules: {
					mobile: [{
						required: true,
						message: "账号不能为空",
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: "密码不能为空",
						trigger: "blur"
					}],
				},
				userImage:this.$store.state.userinfo
			}
		},
		// 组件方法
		methods: {			
		 	async UserLogin() {
				try{
					await this.$refs.loginFormRefs.validate();
						try {
							this.loading = true;
							const {data:res}=await this.$apis.getLogin(this.loginFormParams)
							console.log(res)
							// 将token值存储值vuex中
							this.$store.commit('SetToken',res.data);
							this.loading = false;
							this.$message.success(res.msg)
							this.$router.push('/Home')
						} catch (e) {
							this.$message.error(e)
						}
				}catch(e){
					console.log(e)
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
		/*background-image: url("../images/bg_login.png");*/
		background-repeat: no-repeat;
		background-size: cover;

		.wrapper {
			width: 400px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 9999999;

			.user-avatar {
				text-align: center;

				img {
					width: 120px;
				}
			}

			.title {
				font-size: 24px;
				text-align: center;
				margin-bottom: 20px;
				color: #2d8cf0;
			}
		}
	}
</style>
